<template>
  <div class="monitor-list-elevator-item" @click="toMonitordetail"> 
    
    <el-row class="elevator-no-row" type="flex" justify="center" align="middle">
        <span class="elevator-no">L1</span>
      </el-row>
    <div class="detail">  
      <el-row class="floor-row" type="flex" justify="center" align="middle">
        <span class="floor">13</span>
      </el-row>

      <el-row class="door_status-row" type="flex" justify="center" align="middle">
        <img class="door-status" :src="door_status" />
      </el-row>

      <el-row class="run_status-row" type="flex" justify="center" align="middle">
        <div class="run-status"></div>
      </el-row>

      <el-row class="error_status-row" type="flex" justify="center" align="middle">
        <div class="error-status"></div>
      </el-row>

      <el-row class="power_status-row" type="flex" justify="center" align="middle">
        <div class="power-status"></div>
      </el-row>

      <el-row class="alarm_status-row" type="flex" justify="center" align="middle">
        <img class="alarm-status" :src="alarm_status" />
      </el-row>

      <el-row class="power-switch-row" type="flex" justify="center" align="middle">
        <monitor-switch />
      </el-row>

      <el-row class="run-switch-row" type="flex" justify="center" align="middle">
        <monitor-switch />
      </el-row>

      <el-row class="call-status-row" type="flex" justify="center" align="middle">
        <img class="call-status" :src="call_status" />
      </el-row>
      
    </div>
  </div>
</template>

<script>

import MonitorSwitch from "./MonitorSwitch"

export default {
  name: 'MonitorListElevatorItem',
  components:{
    MonitorSwitch
  },
  props: {
    elevatorObject: {
      type: Object,
      required:true
    }
  },
  data() {
      
      return {
        door_status:"",
        run_status:"",
        error_status:"",
        power_status:"",
        alarm_status:"",
        call_status:"",
        power_switch:true,
        run_switch:false,
      };
    },
    methods: {
      toMonitordetail() {
        this.$router.push({ path:'/MonitorDetail'});
      }
    },
    mounted() {
      
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
  .monitor-list-elevator-item {
    width: 100%;
    height: 340px;
    padding-top: 5px;

    .elevator-no {
      line-height: 26px;
      font-size: 14px;
      color: white;
      font-family: "lcdf";
    }

    .detail {
      width: 100%;
      background: linear-gradient(to top, #171923 , #353740);
      border-radius: 5px;
      padding-top: 10px;
      padding-bottom: 10px;

      .floor-row {
        background-color: #191B24;
        border-radius: 3px;
        margin-left: 10px;
        margin-right: 10px;
        .floor {
          padding-top: 5px;
          line-height: 50px;
          font-size: 30px;
          color: white;
          font-weight: bold;
          font-family: lcdf;
        }
      }
      .door-status {
        width: 20px;
        height: 20px;
        display: block;
        margin-top: 10px;
      }
      .error-status {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(197, 43, 43);
        display: block;
        margin-top: 10px;
      }
      .run-status {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(123, 189, 31);
        display: block;
        margin-top: 10px;
      }
      .power-status {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(164, 168, 164);
        display: block;
        margin-top: 10px;
      }

      .alarm-status {
        width: 20px;
        height: 20px;
        display: block;
        margin-top: 10px;
      }

      .power-switch-row {
        margin-top: 10px;
      }

      .run-switch-row {
        margin-top: 10px;
      }

      .call-status {
        width: 20px;
        height: 20px;
        display: block;
        margin-top: 10px;
        margin-bottom: 5px
      }
    }

    
  }
</style>